<!-- 案例实训 -->
<script setup>
    import { ref } from "vue"

    // 1 图片链接数组
    const imgLinkList = [
      'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-00.gif',
      'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-01.gif',
      'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-02.gif',
      'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-03.gif',
      'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-04.png',
      'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-05.png',
    ]

    // 2 下标地址
    const index = ref(0)
</script>

<template>
  <div class="container">
    <div class="up">
      <button @click="index--" v-if="index > 0">上一页</button>
    </div>
    <div>
      <img :src="imgLinkList[index]" alt="img not found" width="300px">
    </div>
    <div class="bottom">
      <button @click="index++" v-if="index < imgLinkList.length -1">下一页</button>
    </div>
  </div>
</template>

<style>
  .container {
    height: 250px;
    width: 480px;
    display: flex;
  }
  #app {
    display: flex;
    width: 500px;
    height: 350px;
  }
  #app div {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>